
<div id="tabs" style="margin-top:15px;margin-left:20px;"class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
<a href="#tabs-1" aria-controls="tabs-1">Line</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-2" aria-controls="tabs-2">Bar</a>
</li>
</ul>
        <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                   <div id="chart1" class="jqplot-target" style="margin-left:-15px;position: relative; height: 250px; width: 400px;" data-width="400px" data-height="250px">
                   </div>
               </div>
                <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                    <div id="chart2" class="jqplot-target" style="margin-left:-15px;position: relative; height: 250px; width: 400px;">
                    </div>
                </div>
            </div>

<script type="text/javascript" class="code">
	$(document).ready(function() {
		var date = ${date};
		var data = ${data};
		$.jqplot.config.enablePlugins = false;
		$("#tabs").tabs();
	var line = {
			title : 'Coordinating Nodes Metric',
			series : [ {
				neighborThreshold : 0
			} ],
			axes : {
				xaxis : {
		  renderer: $.jqplot.CategoryAxisRenderer,
          ticks: date
				},
			},
			cursor : {show:true,zoom : true}};
var bar={
	animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            title : 'Coordinating Nodes Metric',
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks:date
            }
                },
            
            highlighter: { show: false }
};
	var	plot1 = $.jqplot('chart1', [data], line);
    var plot2 = $.jqplot('chart2', [data], bar);
 
 $('#chart2').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) 
            {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
 $('#tabs').bind('tabsshow', function(event, ui) {
      if (ui.index == 0 && plot1._drawCount == 0) {
        plot1.replot();
      }
      else if (ui.index == 1 && plot2._drawCount == 0) {
        plot2.replot();
      }
    });
	
	});
</script>